<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>jquery DOM </title>
    <link rel="stylesheet" href="./css/index.css">
    <style>
        .titles {
            color: red;
        }
    </style>
    <!-- <script  src="./lib/jquery-3.4.1.js"></script> -->
    <!-- <script>
        $(document).ready(function(){
            // var li = document.createElement("li");
            // var txt = document.createTextNode("aabbbddd");
            // li.append(txt);
            // li.innerHTML="aaaccc";
            // jquery 创建元素
            // console.log($("<li>我是li</li>"));
            var liElem = $("<li>我是li02</li>");
            // append 在容器末尾追加
            // $("ul").append(liElem);
            // liElem.appendTo($("ul"));
            // 在容器前边追加
            // $("ul").prepend(liElem);
            // liElem.prependTo($("ul"));

            var pElem = $("<p>我是p标签</p>");
            // $("ul").before(pElem);
            // pElem.insertBefore($("ul"));

            // $("ul").after(pElem);
            pElem.insertAfter($("ul"));

            // $("ul").remove();
            // $("ul").remove(".ul02");
           
            // $("ul").empty();
            // $("div").empty();
         /*    $("#btn1").click(function(){
                console.log("btn1");
            });

            $("#btn2").click(function(){
                console.log("btn2");
            });
 */
            // 给btn1 ,btn2 添加额外的数据 类似微信小程序
       /*      $("#btn1").data("a","btn1的额外数据");
            $("#btn1").data("b","btn1的额外数据2");
            $("#btn2").data("c",{name:'张三',age:18});

            console.log($("#btn1").data("a"));
            console.log($("#btn1").data("b"));
            console.log($("#btn2").data("c").name); */



            // var btn1 = $("#btn1").remove();
            // var btn2 = $("#btn2").detach();

            // $("body").append(btn1);
            // $("body").append(btn2);
            // console.log(btn1.data("a"))
            // console.log(btn1.data("b"))
            // console.log(btn2.data("c"))
            // 替换
            // $("li.li01").replaceWith($("<li>我是新内容</li>"));
           /*  $("li.li01").replaceWith(function(){
                return '<p>我是段落</p>';
            }); */
         

            // $("<p>新的标签</p>").replaceAll($("ul li"));
            // $("#btn1").replaceAll($("ul li"));
            /* $("#p1").click(function(){
                console.log("p1111");
            })
            $("body").append($("#btn1").clone(true));
            $("body").append($(".div01").clone()); */

            /* $("ul").each(function(index,elem){
                console.log(index,elem);
            }) */

          /*   $("li").each(()=>{
                console.log(this);
                // this DOM 对象
                console.log($(this));
                // console.log($(this).text())
            }) */


            $("li").each(function(index,item){
                // console.log(this);
                // this DOM 对象
                // console.log($(this));
                // console.log($(this).text())

                // this.style.color="red";
                // $(this).css("color","green");
                // console.log($(this).text());
                // console.log(this.innerText);
                // console.log(this.innerHTML);
                // console.log($(this).html("<p>我是p标签</p>"));
                console.log($(this).text("<p>我是p标签</p>"));
            });
            var dataDemo = "nihao";
            // 表单 失去焦点事件
        /*     $("input[type=text]").blur(dataDemo,function(){
                console.log($(this).val("hello world"));
                console.log($(this).val());
                console.log(dataDemo);
            }) */


            /* var btn1 = document.getElementById("btn1");
            btn1.onclick = function(){
                alert("ni hao ");
            }
            btn1.onclick = ""; */


            // 事件监听函数
            var btn1 = document.getElementById("btn1");
            function o(){
                console.log("mouseover 事件监听");
            }


            function out(){
                console.log("mouseout 事件监听");
            }
         
         /*     btn1.addEventListener('mouseover',o);

            btn1.removeEventListener("mouseout",out);
            btn1.addEventListener('mouseout',out);

            btn1.removeEventListener("mouseover",o); */

   




            /* btn1.addEventListener('click',function(){
                console.log("click");
            },true)

            document.addEventListener("click",function(){
                console.log("document");
            },true) */


            // IE 6 7 8 

            btn1.attachEvent('onclick',function(){
                alert("你好");
            })


           
        }); -->
    </script>
</head>
<body>
    <input type="text" placeholder="请输入用户名">
    <input type="password" placeholder="请输入密码">

    <input id="btn1" type="button" value="点我1">
    <input id="btn2" type="button" value="点我2">
    <div class="div01">
        <p id="p1">ddddd
            <span>ddddd</span>

        </p>
        <span>ddddd</span>
        <i>dddddd</i>
    </div>
    <ul>
        <li class="li01">item1<span>我是span</span></li>
        <li>item2</li>
        <li class="titless">item3</li>
        <li class="titles">item4</li>
    </ul>
    <ul class="ul02">
        <li>item1111</li>
        <li>item2111</li>
        <li>item3111</li>
        <li>item4111</li>
    </ul>
</body>
<script>
    var btn1 = document.getElementById("btn1");
    function popup(){
                alert("你好");
    }
    btn1.attachEvent('onclick',popup);

    btn1.detachEvent('onclick',popup);
</script>
</html>